<template>
  <view class="video-item-comp" @click="handleClick">
    <!-- 视频封面图（核心） -->
    <image class="video-cover" :src="video.cover || '/static/default-cover.png'" mode="widthFix"></image>
    <!-- 播放按钮（悬浮中央，修复路径） -->
    <image class="play-btn" src="/static/play.png" mode="widthFix"></image>
    <!-- 视频时长（悬浮右下角） -->
    <view class="duration">{{ formatDuration(video.duration) }}</view>
    
    <!-- 视频信息区域 -->
    <view class="video-info">
      <text class="video-title">{{ video.title }}</text>
      
      <!-- 作者信息 + 关注按钮 -->
      <view class="author-bar">
        <image class="author-avatar" :src="video.author?.avatar || '/static/default-avatar.png'" mode="widthFix"></image>
        <text class="author-name">{{ video.author?.name || '未知作者' }}</text>
        <button 
          class="follow-btn" 
          :class="{ followed: isFollowed }"
          @click.stop="toggleFollow"
        >
          {{ isFollowed ? '已关注' : '关注' }}
        </button>
      </view>
      
      <!-- 互动数据 -->
      <view class="interact-bar">
        <view class="interact-item" @click.stop="toggleLike">
          <image 
            :src="isLiked ? '/static/like-active.png' : '/static/like.png'" 
            class="interact-icon"
          ></image>
          <text class="interact-text">{{ video.likeCount + (isLiked ? 1 : 0) }}</text>
        </view>
        <view class="interact-item">
          <image src="/static/comment.png" class="interact-icon"></image>
          <text class="interact-text">{{ video.commentCount || 0 }}</text>
        </view>
        <view class="interact-item">
          <image src="/static/share.png" class="interact-icon"></image>
          <text class="interact-text">分享</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "VideoItem",
  props: {
    video: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  data() {
    return {
      isFollowed: false,
      isLiked: false
    };
  },
  methods: {
    handleClick() {
      this.$emit('click', this.video);
    },
    toggleFollow() {
      this.isFollowed = !this.isFollowed;
      uni.showToast({ title: this.isFollowed ? '关注成功' : '取消关注', icon: 'none' });
    },
    toggleLike() {
      this.isLiked = !this.isLiked;
    },
    formatDuration(duration) {
      if (!duration) return "00:00";
      const parts = duration.split(':');
      const minute = parts[0]?.padStart(2, '0') || '00';
      const second = parts[1]?.padStart(2, '0') || '00';
      return `${minute}:${second}`;
    }
  }
};
</script>

<style scoped>
/* 组件类名加后缀，避免冲突 */
.video-item-comp {
  background: #fff;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.video-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80rpx;
  height: 80rpx;
  z-index: 10;
  opacity: 0.8;
}

.duration {
  position: absolute;
  bottom: 15rpx;
  right: 15rpx;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 22rpx;
  padding: 5rpx 10rpx;
  border-radius: 8rpx;
  z-index: 10;
}

.video-info {
  padding: 15rpx;
}

.video-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.author-bar {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.author-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
  object-fit: cover;
}

.author-name {
  font-size: 24rpx;
  color: #666;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.follow-btn {
  background: #ff4d4f;
  color: #fff;
  font-size: 22rpx;
  padding: 5rpx 15rpx;
  border-radius: 15rpx;
  border: none;
}

.follow-btn.followed {
  background: #f5f5f5;
  color: #999;
}

.interact-bar {
  display: flex;
  gap: 30rpx;
  align-items: center;
}

.interact-item {
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.interact-icon {
  width: 28rpx;
  height: 28rpx;
  object-fit: contain;
}

.interact-text {
  font-size: 24rpx;
  color: #666;
}
</style>